<template>
  <div class="header-bg w-full">
    <!-- Navigation Bar-->
    <header class="topnav">
      <div class="topbar-main">
        <div class="container-fluid w-full max-w-screen-xl px-4 mx-auto">
          <!-- Logo-->
          <div class="block fo992:hidden mr-12">
            <a href="/blog.html" class="float-left leading-10 uppercase">
              <img
                :src="'https://v3.vuejs.org/logo.png'"
                alt="LOGO"
                width="28"
                height="28"
                class="w-7 h-7 border-none"
              />
            </a>
          </div>
          <!-- End Logo-->
          <!-- menu-extras -->
          <div
            class="relative flex flex-wrap items-center justify-between p-0 mb-0 rounded-none"
          >
            <!-- pc -->
            <ul class="list-inline flags-dropdown d-none d-lg-block mb-0">
              <li class="list-inline-item text-white-50 mr-3">
                <span class="font-13">Help : +012 3456 789</span>
              </li>
            </ul>
            <!-- pc Search input -->
            <div class="search-wrap" id="search-wrap">
              <div class="search-bar">
                <!-- <input class="search-input" type="search" placeholder="Search" />
                <a href="#" class="close-search toggle-search" data-target="#search-wrap">
                  <i class="mdi mdi-close-circle"></i>
                </a> -->
              </div>
            </div>
            <!-- mobile -->
            <ul class="ml-auto">
              <fo-dropdown menu-class="tip" @command="dropdownCommand">
                <template #dropdown>
                  <fo-dropdown-item> </fo-dropdown-item>
                  <fo-dropdown-item disabled>
                    <a class="dropdown-item" v-waves="['button', 'float']" href="#"
                      ><i class="dripicons-user text-muted"></i> Profile</a
                    >
                  </fo-dropdown-item>
                  <fo-dropdown-item>
                    <a class="dropdown-item" v-waves="['button', 'yellow']" href="#"
                      ><span class="badge badge-success float-right mt-1">5</span
                      ><i class="dripicons-gear text-muted"></i> Settings</a
                    >
                  </fo-dropdown-item>
                  <fo-dropdown-item divided>
                    <a class="dropdown-item" v-waves="['button', 'yellow']" href="#"
                      ><i class="dripicons-exit text-muted"></i> Logout</a
                    >
                  </fo-dropdown-item>
                </template>
              </fo-dropdown>
              <li class="inline-block fo992:hidden">
                <!-- Mobile menu toggle-->
                <a class="border-0 relative hover:bg-transparent nav-link">
                  <div
                    class="lines relative block mr-2.5 pt-3"
                    style="width: 25px; height: 23px; transition: all 0.5s ease"
                  >
                    <span></span>
                    <span></span>
                    <span></span>
                  </div>
                </a>
                <!-- End mobile menu toggle-->
              </li>
            </ul>
          </div>
          <!-- end menu-extras -->

          <div class="clearfix"></div>
        </div>
        <!-- end container -->
      </div>
      <!-- end topbar-main -->

      <!-- MENU Start -->
      <div class="navbar-custom">
        <div class="container-fluid navbar-container">
          <div class="logo">
            <a href="index.html" class="logo">
              <img
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                alt=""
                height="20"
                class="logo-large"
              />
            </a>
          </div>
          <!-- End Logo-->
          <div class="navigation">
            <!-- Navigation Menu-->
            <ul class="navigation-menu">
              <li class="has-submenu active">
                <a href="index.html"><i class="dripicons-meter"></i>Dashboard</a>
              </li>
              <li class="has-submenu">
                <a href="#"
                  ><i class="dripicons-briefcase"></i>User Interface
                  <i class="mdi mdi-chevron-down mdi-drop"></i
                ></a>
                <ul class="submenu megamenu hidden">
                  <li>
                    <ul>
                      <li><a href="ui-alerts.html">Alerts</a></li>
                      <li><a href="ui-badge.html">Badge</a></li>
                      <li><a href="ui-buttons.html">Buttons</a></li>
                      <li><a href="ui-cards.html">Cards</a></li>
                      <li><a href="ui-dropdowns.html">Dropdowns</a></li>
                      <li><a href="ui-navs.html">Navs</a></li>
                    </ul>
                  </li>
                  <li>
                    <ul>
                      <li><a href="ui-tabs-accordions.html">Tabs &amp; Accordions</a></li>
                      <li><a href="ui-modals.html">Modals</a></li>
                      <li><a href="ui-images.html">Images</a></li>
                      <li><a href="ui-progressbars.html">Progress Bars</a></li>
                      <li><a href="ui-lightbox.html">Lightbox</a></li>
                      <li><a href="ui-pagination.html">Pagination</a></li>
                    </ul>
                  </li>
                  <li>
                    <ul>
                      <li><a href="ui-popover-tooltips.html">Popover & Tooltips</a></li>
                      <li><a href="ui-carousel.html">Carousel</a></li>
                      <li><a href="ui-video.html">Video</a></li>
                      <li><a href="ui-typography.html">Typography</a></li>
                      <li><a href="ui-sweet-alert.html">Sweet-Alert</a></li>
                      <li><a href="ui-grid.html">Grid</a></li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
            <!-- End navigation menu -->
          </div>
          <!-- end #navigation -->
        </div>
        <!-- end container -->
      </div>
      <!-- end navbar-custom -->
    </header>
    <!-- End Navigation Bar-->

    <div class="container-fluid">
      <!-- Page-Title -->
      <div class="row">
        <div class="col-sm-12">
          <div class="pt-5 text-white">
            <div class="row items-center">
              <div class="col-md-8 px-4">
                <h4 class="mt-2.5 font-semibold text-lg leading-5.5 uppercase">
                  Dashboard
                </h4>
                <ol class="breadcrumb flex flex-wrap rounded py-3 bg-transparent text-sm">
                  <li class="breadcrumb-item"><a href="#">Foxia</a></li>
                  <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
                </ol>
              </div>
              <div class="col-md-4 px-4">
                <div class="float-right hidden md:block">
                  <fo-dropdown @command="dropdownCommand">
                    <template v-slot:default="slotProps">
                      <button
                        class="btn btn-light dropdown-toggle whitespace-nowrap rounded-3xl px-3 py-1.5"
                        type="button"
                        :class="{ show: slotProps.visible }"
                      >
                        <i class="ti-settings mr-1"></i> Settings
                      </button>
                    </template>
                    <template #dropdown>
                      <fo-dropdown-item> </fo-dropdown-item>
                      <fo-dropdown-item disabled>
                        <a class="dropdown-item" href="#">Something</a>
                      </fo-dropdown-item>
                      <fo-dropdown-item>
                        <a class="dropdown-item" href="#">Action</a>
                      </fo-dropdown-item>
                      <fo-dropdown-item divided>
                        <a class="dropdown-item" href="#">Separated link</a>
                      </fo-dropdown-item>
                    </template>
                  </fo-dropdown>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end page title end breadcrumb -->
    </div>
  </div>
</template>

<script>
import FoDropdown from "@/components/foxia/FoDropdown.vue";
import FoDropdownItem from "@/components/foxia/FoDropdownItem.vue";
import { defineComponent } from "vue";
export default defineComponent({
  name: "fo-header",
  components: {
    [FoDropdown.name]: FoDropdown,
    [FoDropdownItem.name]: FoDropdownItem,
  },
  setup() {
    const dropdownCommand = (value) => {
      console.log(value);
    };
    return { dropdownCommand };
  },
});
</script>

<style lang="less">
.header-bg {
  // background: -webkit-gradient(linear, left top, right top, from(#7f59dc), to(#655be6));
  background: linear-gradient(to right, #7f59dc, #655be6);
  box-shadow: 1px 0 14px 0 rgba(0, 0, 0, 0.5);
  @apply pb-5;
  .topnav {
    transition: all 0.5s ease;
    @apply bg-transparent border-0;
    // 第一行
    .topbar-main {
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    // 第二行
    .navbar-custom {
      padding: 5px 0px;
      background-color: rgba(255, 255, 255, 0.04);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      .navbar-container {
        .logo {
          @apply hidden fo992:block;
          a {
            line-height: 3.25rem;
            // margin-right: 70px;
            @apply uppercase float-left  mr-16;
            img {
              @apply h-5 inline-block;
            }
          }
        }
        .navigation {
          @apply fo992:block;
          .navigation-menu {
            li {
              @apply relative inline-block;
              &:first-of-type > a {
                padding-left: 0;
              }
              &.active > a {
                @apply fo992:text-white;
              }
              a {
                color: rgba(255, 255, 255, 0.7);
                font-size: 15px;
                transition: all 0.5s ease;
                border-radius: 5px;
                line-height: 18px;
                @apply block px-5 fo992:py-4;
                @apply fo992:hover:text-white;
                i {
                  font-size: 14px;
                  vertical-align: middle;
                  margin-right: 8px;
                  transition: all 0.5s ease;
                  &.mdi-drop {
                    @apply fo992:inline-block;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  // 第三行
  .container-fluid {
    .breadcrumb {
      .breadcrumb-item {
        color: rgba(255, 255, 255, 0.7);
        padding-left: 0.5rem;
        &.active {
          color: #ffffff;
        }
      }
      // 不包含第一个
      & > .breadcrumb-item + .breadcrumb-item:before {
        display: inline-block;
        padding: 0 4px;
        margin-right: 7px;
        color: rgba(255, 255, 255, 0.7);
        content: "\f105" !important;
        font-family: FontAwesome;
      }
    }
    .dropdown {
      .btn {
        color: #212529;
        border: 1px solid transparent; // border border-solid border-transparent
        // font-size: 1rem; text-base
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
          border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        @apply inline-block font-normal leading-normal text-center align-middle select-none;
        &.btn-light {
          color: #212529;
          background-color: #f8f9fa;
          border-color: #f8f9fa;
        }
        &.dropdown-toggle::after {
          content: "";
          display: inline-block;
          margin-left: 0.255em;
          vertical-align: 0.255em;
          border-top: 0.3em solid;
          border-right: 0.3em solid transparent;
          border-bottom: 0;
          border-left: 0.3em solid transparent;
        }
      }
    }
  }
}
.lines {
  span {
    height: 2px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 5px;
    transition: transform 0.5s ease;
  }
  &.open span {
    position: absolute;
    &:first-child {
      top: 18px;
      transform: rotate(45deg);
    }
    &:nth-child(2) {
      visibility: hidden;
    }
    &:last-child {
      width: 100%;
      top: 18px;
      transform: rotate(-45deg);
    }
  }
}
</style>
